<template>
  <a-card v-if="wxAppImg" :bordered="false">
    <a-card style="margin-top: 10px;" v-for="(img, index1) in wxAppImg" :key="index1" :title="index1">
      <div class="img-box">
        <div style="text-align: center;margin: 10px;max-width: 100%;" v-for="(img2, index2) in img" :key="index2">
          <img @click="pic = img2; visible = true" :src="img2" alt="" srcset="">
          <div style="text-align: center;">{{index2}}</div>
        </div>
      </div>
    </a-card>
    <a-modal v-model="visible" :bodyStyle="{padding: 0}" :footer="null">
      <img style="width: 100%;" :src="pic" alt="">
    </a-modal>
  </a-card>
</template>

<script>
import { getImg } from '@/api/statistic/data'
export default {
  name: 'imgList',
  components: {},
  data () {
    return {
      wxAppImg: null,
      pic: null,
      visible: false
    }
  },
  created () {
    this.getImg()
  },
  methods: {
    getImg() {
      getImg().then(res => {
        if (res.code == 0) {
          this.wxAppImg = res.data
        }
      })
    }
  },
  watch: {
    '$route.path' () {}
  }
}
</script>

<style scoped>
.img-box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.img-box img {
  height: 30px;
  margin: 10px;
  max-width: 100%;
  background: #f0f0f0;
}
</style>
